<script
    lang="ts">
import {getRolePageListApi, saveNewRoleApi, deleteRoleApi, batchDeleteRoleApi} from '@/api/role/role.js'
import {Message} from "element-ui";

export default {
  data() {
    return {
      roleList: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      searchCondition: {
        roleName: ''
      },
      addDialogFormVisible: false,
      newRole: {
        description: "",
        roleCode: "",
        roleName: ""
      },
      multipleSelection: []

    }
  },
  created() {
    this.fetchData(this.currentPage, this.pageSize, this.searchCondition)
  },
  methods: {
    /**
     * 分页条件查询
     * @param currentPage
     * @param pageSize
     */
    fetchData(currentPage, pageSize) {
      getRolePageListApi(currentPage, pageSize, this.searchCondition)
          .then(res => {

            const {records, total, size, current} = res.data

            this.roleList = records
            this.total = total
            this.pageSize = size
            this.currentPage = current
          })
          .catch(err => {
            console.log(err)
          })
    },
    /**
     * 分页功能页面大小改变
     * @param pageSize 当前页面的大小
     */
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.fetchData(this.currentPage, this.pageSize, this.searchCondition)
    },
    /**
     * 分页功能当前页改变
     * @param currentPage 当前页
     */
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.fetchData(this.currentPage, this.pageSize, this.searchCondition)

    },
    /**
     * 搜索条件
     */
    search(searchCondition) {
      this.fetchData(this.currentPage, this.pageSize, searchCondition)
    },
    /**
     * 单个元素修改功能
     * @param index
     * @param row
     */
    handleEdit(index, row) {
      console.log(index, row);

    },
    /**
     * 删除当前行元素的功能
     * @param index
     * @param row
     */
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(index, row);
        let res = await deleteRoleApi(row.id)
        this.fetchData(this.currentPage, this.pageSize)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      })

    },
    /**
     * 添加新角色
     * @param role
     */
    async addNewRole(role) {
      this.addDialogFormVisible = false
      let res = await saveNewRoleApi(role)
      this.fetchData(this.currentPage, this.pageSize)
      Message({
        message: res.message,
        type: 'success',
        duration: 5 * 1000
      })
      //todo: 清空form数据不生效
      // this.$refs['addRoleForm'].resetFields()
      this.newRole.roleName = ''
      this.newRole.roleCode = ''
      this.newRole.description = ''
    },
    handleSelectionChange(val) {

      this.multipleSelection = val.map(item => item.id)

    },
    //todo:批量删除功能未完成
    async batchRemove(ids) {
      console.log(ids)
      if (ids.length != 0) {
        let res = await batchDeleteRoleApi(ids)
        Message({
          message: res.message,
          type: 'success',
          duration: 5 * 1000
        })
        this.fetchData(this.currentPage,this.pageSize)
      }else{
        Message({
          message: '请选择要删除的数据',
          type: 'warning',
          duration: 5 * 1000
        })
      }
    }
  }
}
</script>

<template>
  <div>
    <el-form :inline="true"
             :model="searchCondition">
      <el-form-item>
        <el-input v-model="searchCondition.roleName"
                  placeholder="请输入查询条件"
                  clearable
                  @clear="fetchData(currentPage,pageSize)"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="search(searchCondition)">查询
        </el-button>
      </el-form-item>
    </el-form>
    <el-button @click="batchRemove(multipleSelection)">批量删除</el-button>

    <el-table
        @selection-change="handleSelectionChange"
        :data="roleList">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="roleName"
          label="角色名">
      </el-table-column>
      <el-table-column
          prop="roleCode"
          label="角色代码">
      </el-table-column>
<!--      <el-table-column
          prop="description"
          label="角色描述">
      </el-table-column>-->
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间">
      </el-table-column>
      <el-table-column
          prop="isDeleted"
          label="是否删除">
      </el-table-column>

      <el-table-column
          align="right">
        <template slot="header"
                  slot-scope="scope">
          <el-button
              @click="addDialogFormVisible=true"
              size="mini">
            添加角色
          </el-button>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog title="添加新角色"
               :visible.sync="addDialogFormVisible">
      <el-form :model="newRole"
               ref="addRoleForm">
        <el-form-item label="角色名">
          <el-input v-model="newRole.roleName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色代码">
          <el-input v-model="newRole.roleCode"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="newRole.description"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addNewRole(newRole)">确 定
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style scoped>

</style>
